<template>
  <div class="app-container">
    <el-form size="small" inline>
      <el-form-item label="模块名称">
        <el-input placeholder="请输入模块名称" clearable />
      </el-form-item>
      <el-form-item label="是否收费">
        <el-select placeholder="请选择是否收费" v-model="query.isCharge">
          <el-option v-for="item in optionList" :key="item.value" :label="item.name" :value="item.label"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="是否宣传">
        <el-select placeholder="请选择是否宣传" v-model="query.flag">
          <el-option v-for="item in optionList" :key="item.value" :label="item.name" :value="item.label"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="面向用户">
        <el-select placeholder="请选择" v-model="query.directionUser">
          <el-option
            v-for="item in dict.type.sys_user_oriented"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" @click="getList">查询</el-button>
        <el-button icon="el-icon-refresh" @click="handleReset">重置</el-button>
        <el-button type="success" icon="el-icon-plus" plain @click="dialogVisible = true">新增</el-button>
        <help></help>
      </el-form-item>
    </el-form>
    <el-table :data="list" border size="small" v-loading="loading">
      <el-table-column fixed type="index" align="center" width="50" label="序号" />
      <el-table-column align="center" label="图标">
        <template slot-scope="scope">
          <y-show-all-file :path="scope.row.icon" height="50px" width="50px" />
        </template>
      </el-table-column>
      <el-table-column align="center" label="菜单名称" prop="name" />
      <el-table-column align="center" label="功能简介" prop="moduleIntroduction" show-overflow-tooltip />
      <el-table-column align="center" label="相对路由" prop="component" show-overflow-tooltip />
      <el-table-column align="center" label="跳转类型">
        <template slot-scope="scope">
          {{ scope.row.skipType == 1 ? '系统外页面' : '系统内页面' }}
        </template>
      </el-table-column>
      <el-table-column align="center" label="是否收费">
        <template slot-scope="scope">
          {{ scope.row.isCharge == 1 ? '是' : '否' }}
        </template>
      </el-table-column>
      <el-table-column align="center" label="模块价格" prop="price" />
      <el-table-column align="center" label="是否宣展">
        <template slot-scope="scope">
          {{ scope.row.flag == 1 ? '是' : '否' }}
        </template>
      </el-table-column>
      <el-table-column align="center" label="面向用户">
        <template slot-scope="scope">
          <dict-tag :options="dict.type.sys_user_oriented" :value="scope.row.directionUser" />
        </template>
      </el-table-column>
      <el-table-column align="center" label="操作">
        <template slot-scope="scope">
          <el-button size="small" type="text" @click="handleEdit(scope.row.id)">编辑</el-button>
          <el-button size="small" type="text" @click="handleDelete(scope.row.id)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <pagination
      v-show="total > 0"
      :total="total"
      :page.sync="query.pageNum"
      :limit.sync="query.pageSize"
      @pagination="getList"
    />

    <help-dialog title="运营模块设置" :visible.sync="dialogVisible" @close="handleClose">
      <el-form size="small" label-width="120px" ref="form" :model="queryParam" :rules="rules">
        <el-row>
          <el-col :span="12">
            <el-form-item label="菜单名称" prop="name">
              <el-input placeholder="请输入菜单名称" clearable v-model="queryParam.name" />
            </el-form-item>
            <el-form-item label="相对路由" prop="component">
              <el-input placeholder="请输入相对路由" clearable v-model="queryParam.component" />
            </el-form-item>
            <el-form-item label="面向用户" prop="directionUser">
              <el-select placeholder="请选择" v-model="queryParam.directionUser">
                <el-option
                  v-for="item in dict.type.sys_user_oriented"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                ></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="是否宣传展示" prop="flag">
              <el-radio-group v-model="queryParam.flag">
                <el-radio v-for="item in optionList" :key="item.label" :label="item.label">{{ item.name }}</el-radio>
              </el-radio-group>
            </el-form-item>
            <el-form-item label="跳转类型" prop="skipType">
              <el-select placeholder="请选择" v-model="queryParam.skipType">
                <el-option label="系统内页面" value="0"></el-option>
                <el-option label="系统外页面" value="1"></el-option>
                <el-option label="外部地址" value="2"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="应用归属" prop="appAttribution">
              <el-select placeholder="请选择" v-model="queryParam.appAttribution">
                <el-option label="仅普通版" value="0"></el-option>
                <el-option label="仅专业版" value="1"></el-option>
                <el-option label="普通版+专业版" value="2"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="功能简介" prop="moduleIntroduction">
              <el-input
                placeholder="请输入功能简介"
                clearable
                type="textarea"
                :rows="2"
                v-model="queryParam.moduleIntroduction"
              />
            </el-form-item>
            <el-form-item label="是否收费" prop="isCharge">
              <el-radio-group v-model="queryParam.isCharge">
                <el-radio v-for="item in optionList" :key="item.label" :label="item.label">{{ item.name }}</el-radio>
              </el-radio-group>
            </el-form-item>
            <el-form-item
              label="模块价格"
              v-if="queryParam.isCharge == 1"
              prop="price"
              key="price"
              :rules="rules.price"
            >
              <el-input placeholder="请输入模块价格" clearable v-model="queryParam.price" />
            </el-form-item>
            <el-form-item label="图标" prop="icon">
              <y-upload
                ref="upload"
                accept=".jpg,.jpeg,.png,.JPG,.JPEG,.PBG"
                limit="1"
                :path="[queryParam.icon]"
                @onSuccess="handleSuccess"
              ></y-upload>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button v-show="!queryParam.id" type="primary" @click="handleAdd">确 定</el-button>
        <el-button v-show="queryParam.id" type="primary" @click="handleUpdate">更 新</el-button>
        <el-button @click="dialogVisible = false">取 消</el-button>
      </div>
    </help-dialog>
  </div>
</template>

<script>
import moduleApi from '@/api/operations/module'

export default {
  dicts: ['sys_user_oriented'],
  data() {
    return {
      loading: false,
      query: {
        name: '',
        isCharge: '',
        flag: '',
        directionUser: '',
        pageNum: 1,
        pageSize: 10
      },
      total: 0,
      list: [],
      optionList: [
        { label: '0', name: '否' },
        { label: '1', name: '是' }
      ],
      dialogVisible: false,
      queryParam: {
        appAttribution: '2',
        name: '',
        component: '',
        icon: '',
        moduleIntroduction: '',
        price: null,
        flag: '',
        isCharge: '',
        directionUser: '',
        skipType: ''
      },
      rules: {
        name: [{ required: true, message: '请输入模块名称', trigger: 'blur' }],
        component: [{ required: true, message: '请输入模块路由', trigger: 'blur' }],
        icon: [{ required: true, message: '请上传图标', trigger: 'blur' }],
        moduleIntroduction: [{ required: true, message: '请输入模块介绍', trigger: 'blur' }],
        price: [
          { required: true, message: '请输入价格', trigger: 'blur' },
          {
            pattern: /(^[\d]|^[1-9][\d]{0,8})($|[\.][\d]{1,2}$)/,
            message: '请输入最多两位小数的数字',
            trigger: 'blur'
          }
        ],
        flag: [{ required: true, message: '请选择是否宣传展示', trigger: 'blur' }],
        directionUser: [{ required: true, message: '请选择', trigger: 'blur' }],
        skipType: [{ required: true, message: '请选择跳转类型', trigger: 'blur' }]
      }
    }
  },
  created() {
    this.getList()
  },
  methods: {
    getList() {
      this.loading = true
      moduleApi.chargeList(this.query).then((res) => {
        this.loading = false
        this.total = res.total
        this.list = res.rows
      })
    },
    handleReset() {
      this.query = {
        name: '',
        isCharge: '',
        flag: '',
        directionUser: '',
        pageNum: 1,
        pageSize: 10
      }
      this.getList()
    },
    handleSuccess(file) {
      this.queryParam.icon = file.router
    },
    handleEdit(id) {
      moduleApi.chargeInfo(id).then((res) => {
        this.queryParam = {
          appAttribution: res.data.appAttribution,
          name: res.data.name,
          component: res.data.component,
          icon: res.data.icon,
          moduleIntroduction: res.data.moduleIntroduction,
          price: res.data.price || null,
          flag: res.data.flag,
          isCharge: res.data.isCharge,
          directionUser: res.data.directionUser,
          skipType: res.data.skipType,
          id: res.data.id
        }

        this.dialogVisible = true
      })
    },
    handleDelete(id) {
      this.$confirm('确定删除当前设置的模块信息?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          moduleApi.chargeRemove(id).then((res) => {
            this.$message.success('删除成功')
            this.getList()
          })
        })
        .catch(() => {
          this.$message.info('已取消删除')
        })
    },
    handleClose() {
      this.queryParam = {
        appAttribution: '2',
        name: '',
        component: '',
        icon: '',
        moduleIntroduction: '',
        price: null,
        flag: '',
        isCharge: '',
        directionUser: '',
        skipType: ''
      }
    },
    handleAdd() {
      this.$refs.form.validate((valid) => {
        if (valid) {
          moduleApi.chargeAdd(this.queryParam).then((res) => {
            this.$message.success('添加成功')
            this.dialogVisible = false
            this.getList()
          })
        }
      })
    },
    handleUpdate() {
      this.$refs.form.validate((valid) => {
        if (valid) {
          moduleApi.chargeEdit(this.queryParam).then((res) => {
            this.$message.success('修改成功')
            this.dialogVisible = false
            this.getList()
          })
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped></style>
